<template>
  <div class="l-box">
    <div class="title">
      {{ types === 1 ? nav.Forgot : nav.Register }}
      <img class="c-icon" src="/image/common/close.png" alt="" @click="closePoup" />
    </div>
    <div v-if="messageInfo" class="message-box">{{ messageInfo }}</div>
    <div class="content-box">
      <div class="stit">{{ input.uname }}</div>
      <div class="input-box">
        <input class="input" v-model="uname" type="text" :placeholder="input.uname" />
      </div>
      <div v-if="types === 2" class="stit mt10">{{ input.nickname }}</div>
      <div v-if="types === 2" class="input-box">
        <input class="input" v-model="nickname" type="text" :placeholder="input.nickname" />
      </div>
      <div class="stit mt10">{{ input.email }}</div>
      <div class="input-box">
        <input class="input" v-model="email" type="text" :placeholder="input.email" />
        <div v-if="types === 1" class="send-btn" @click="sendCode">{{ btn.sendCode }}</div>
      </div>
      <div v-if="types === 1" class="stit mt10">{{ input.code }}</div>
      <div v-if="types === 1" class="input-box">
        <input class="input" v-model="codes" type="text" :placeholder="input.code" />
      </div>
      <div class="stit mt10">{{ input.pswd }}</div>
      <div class="input-box">
        <input class="input" v-model="password" type="password" :placeholder="input.pswd" />
        <img class="e-icon" src="/image/icon/eye.png" alt="" />
      </div>
      <div class="btn" @click="sureEnter">{{ types === 1 ? btn.Reset : btn.Register }}</div>
      <div class="o-btn" @click="changeType(-1)">{{ btn.goLogin }}</div>
      <div v-if="types === 1" class="o-btn2">
        {{ btn.NoAccount
        }}<span class="registerTxt" @click="changeType(2)">{{ btn.registerNow }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { language } from "~/conf";

const { nav, input, btn, mess } = language;

let messageInfo = ref("");
const emit = defineEmits(["changeType","closeLogin"]);
const props = defineProps({
  types: {
    type: Number,
    default: 1, //-1 login 1 forgot 2 register
  },
});
const closePoup = () => {
  emit("closeLogin");
};
let email = ref("");
let uname = ref("");
let nickname = ref("");
let password = ref("");
let codes = ref("")

const changeType = (type: number) => {
  emit("changeType", type);
};

const sendCode = async () => {
  if(!email.value){
    messageInfo.value = mess.NoEmail
  }
  const { msg, code } = await useServerFetch("/app-api/member/auth/send-mail-code", {
    method: "POST",
    body: {
      mail: email.value,
      scene: 4,
    },
  });
  if(code){
    messageInfo.value = msg;
  }else{
    message.success(mess.successSend);
  }
};

const sureEnter = async () => {
  if (props.types === 1) {
    const { msg, code } = await useServerFetch("/app-api/member/user/reset-password", {
      method: "PUT",
      body: {
        userName: uname.value,
        password: password.value,
        mail: email.value,
        code: codes.value,
      },
    });
    if (code === 0) {
      message.success(mess.saveSucess);
    } else {
      messageInfo.value = msg;
    }
  } else {
    const { msg, code } = await useServerFetch("/app-api/member/user/register", {
      method: "POST",
      body: {
        username: uname.value,
        password: password.value,
        email: email.value,
        nickname: nickname.value,
      },
    });
    if (code === 0) {
      message.success(mess.successRegister);
      changeType(-1)
    } else {
      messageInfo.value = msg;
    }
  }
};
</script>

<style lang="stylus" scoped>
.mt10{
  margin-top 10px
}
.l-box{
    position: absolute;
    top:50%;
    left:50%;
    width: 456px;
    // height: 372px;
    padding-bottom:20px;
    background: #FFFFFF;
    transform: translate(-50%,-50%);
    .title{
      position relative
      font-weight: 300;
      font-size: 22px;
      color: #000000;
      text-align: center;
      margin-top: 30px;
      margin-bottom: 50px
      .c-icon{
        position absolute;
        top: -10px;
        right:20px
        width 20px;
        height 20px;
        cursor pointer
      }
    }
    .message-box{
      width: 408px;
      height: 21px;
      line-height 21px
      background: #F8E8E9;
      border-radius: 4px;
      margin-left 24px;
      padding 0 7px;
      font-weight: 400;
      font-size: 10px;
      color: #E27177;
      box-sizing border-box;
      margin-bottom 10px
    }
    .content-box{
      margin-left:25px
    }
    .stit{
      margin-bottom:5px
    }
    .input-box{
      position: relative;
      width 408px
      .send-btn{
        position:absolute;
        right 1px
        top 2px
        font-size 10px
        padding 6px 10px
        color #fff
        background: #000000;
        cursor pointer
      }
      .e-icon{
        position:absolute;
        right 12px
        top 9px
        width 19px
        height 13px
        cursor pointer
      }
      .img-ava{
        width 100px;
        height 100px;
        border-radius: 8px;
      }
      .input{
        border 0
        width: 408px;
        height: 30px;
        line-height: 30px;
        background: #F8F8F8;
        border-radius: 4px;
        border: 1px solid #666666;
        font-size 12px;
        padding 8px
        box-sizing: border-box;
        &:focus{
          outline 0
        }
      }
    }
    .btn{
      width: 103px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #000000;
      border-radius: 4px;
      font-size: 12px;
      color: #FFFFFF;
      border: 1px solid #666666;
      margin-top 18px
      cursor pointer
    }
    .o-btn{
      display: inline-block;
      margin-top 16px;
      font-size: 10px;
      text-decoration-line: underline;
      cursor pointer
    }
    .o-btn2{
      font-size: 10px;
      margin-top 5px
    }
    .registerTxt{
      font-size: 10px;
      text-decoration-line: underline;
      cursor pointer
    }
}
</style>
